<template>
    <div class="login">
        <div class="logo">
            <img :src="require('@/assets/img/login/logo.png')" @click="goHome">
        </div>
        <div class="form">
            <van-form>
                <van-field v-model="username" name="用户名" placeholder="请输入用户" :rules="[{ required: true }]" />
                <van-field v-model="password" type="password" name="密码" placeholder="请输入登录密码"
                    :rules="[{ required: true }]" />
                <input type="checkbox" id="agree" v-model="checkShow">
                <label for="agree">
                    我已阅读并同意<span>隐私政策</span>和<span>服务协议</span>
                </label>
                <div>
                    <van-button @click="goLogin" round block type="info" native-type="submit" :disabled="!checkShow">登录
                    </van-button>
                </div>
            </van-form>
            <div class="message">
                <div class="forget">忘记密码</div>
                <div class="msg">使用密码验证码登录</div>
            </div>
        </div>
        <div class="other-login">
            <div class="tit" @click="otherShow = !otherShow">
                其他登录方式
                <div class="open" v-if="!otherShow">
                    <img :src="require('@/assets/img/login/open.png')">
                </div>
                <div class="close" v-else>
                    <img :src="require('@/assets/img/login/close.png')">
                </div>
            </div>
            <div class="items" v-show="otherShow">
                <ul>
                    <li>
                        <img :src="require('@/assets/img/login/taobao.png')">
                    </li>
                    <li>
                        <img :src="require('@/assets/img/login/weibo.png')">
                    </li>
                    <li>
                        <img :src="require('@/assets/img/login/email.png')">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: '',
            checkbox: false,
            otherShow: false,
            checkShow: false
        };
    },
    methods: {
        goHome() {
            this.$router.push({ name: 'home' })
        },
        goLogin() {
            // 通过vuex中转数据
            this.$store.dispatch("loginAsync", {
                name: this.username,
                password: this.password
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.$toast("登录成功")
                    // 回到首页
                    // 回到跳转前登录页面
                    let next = this.$route.query.next;
                    if (next) {
                        this.$router.push(next)
                    }
                    else {
                        this.$router.push({ name: 'home' })
                    }
                }
                else {
                    this.$toast(res.msg)
                }
            })
        },
    },

}
</script>

<style lang="less">
.login {
    .logo {
        height: 80px;
        line-height: 90px;
        text-align: center;
        margin: 0 12px;

        img {
            height: 30px;
            margin-top: 5px;
        }
    }

    .form {
        margin: 0 15px 54px;

        .van-form {
            .van-cell {
                margin-bottom: 12px;
                padding: 12px 40px 12px 10px;
                height: 42px;
                border-radius: 20px;
                line-height: 20px;
                background-color: #f5f5f5;
                border: 1px solid #f5f5f5;
            }

            #agree {
                display: none;
            }

            label {
                margin: 0 0 10px;
                font-size: 12px;
                color: #999;
                display: block;

                span {
                    margin: 0 3px;
                    text-decoration: underline;
                }
            }

            label::before {
                content: "";
                display: inline-block;
                width: 12px;
                height: 12px;
                box-sizing: border-box;
                border: 1px solid #999;
                border-radius: 100%;
                padding: 2px;
                background-color: white;
                background-clip: content-box;
                vertical-align: text-top;
                margin-right: 3px;
            }

            input:checked+label::before {
                background-color: #666;
            }

            .van-button {
                height: 42px;
                line-height: 42px;
                background-image: linear-gradient(-90deg, #f00 0, #ff3264 100%);
                border: 0;
                border-radius: 21px;
                font-size: 16px;
            }

            .van-field__error-message,
            .van-field__control {
                display: inline-block;
            }
        }

        .message {
            margin: 8px 0;
            text-align: right;
            zoom: 1;

            .forget {
                float: left;
                clear: right;
                height: 14px;
                line-height: 14px;
                color: #999;
                margin-left: 0;
                font-size: 12px;
            }

            .msg {
                height: 14px;
                line-height: 14px;
                color: #999;
                margin-left: 0;
                font-size: 12px;
            }
        }
    }

    .other-login {
        text-align: center;
        height: 16px;
        line-height: 16px;

        .tit {
            font-size: 14px;
            color: #666;
            letter-spacing: 0;
            display: inline-block;
        }

        .open,
        .close {
            display: inline-block;

            img {
                width: 14px;
                height: 14px;
                vertical-align: -15%;
            }
        }

        .items {
            ul {
                margin-top: 18px;
                text-align: center;

                li {
                    display: inline;
                    margin-right: 21px;

                    img {
                        height: 36px;
                        width: 36px;
                    }
                }
            }
        }
    }

    .van-field__error-message {
        display: none !important;
    }
}
</style>